﻿<h4>Custom thumb</h4>
<FluentSlider Min="0" Max="100" Step="10" @bind-Value=value1>
    <FluentSliderLabel Position="0">0</FluentSliderLabel>
    <FluentSliderLabel Position="10">10</FluentSliderLabel>
    <FluentSliderLabel Position="20">20</FluentSliderLabel>
    <FluentSliderLabel Position="30">30</FluentSliderLabel>
    <FluentSliderLabel Position="40">40</FluentSliderLabel>
    <FluentSliderLabel Position="50">50</FluentSliderLabel>
    <FluentSliderLabel Position="60">60</FluentSliderLabel>
    <FluentSliderLabel Position="70">70</FluentSliderLabel>
    <FluentSliderLabel Position="80">80</FluentSliderLabel>
    <FluentSliderLabel Position="90">90</FluentSliderLabel>
    <FluentSliderLabel Position="100">100</FluentSliderLabel>
    <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="thumb" />
</FluentSlider>

<h5 style="margin-top: 60px;">
    Custom labels and thumb and hidden marks on labels
</h5>
<FluentSlider Min="0" Max="100" Step="10" @bind-Value=value2>
    <FluentSliderLabel Position="0" HideMark="true">
        <FluentIcon Value="@(new Icons.Regular.Size16.Star())" Color=Color.Neutral />
    </FluentSliderLabel>
    <FluentSliderLabel Position="50" HideMark="true">50</FluentSliderLabel>
    <FluentSliderLabel Position="100" HideMark="true">
        <FluentIcon Value="@(new Icons.Regular.Size16.Clock())" Color=Color.Neutral />
    </FluentSliderLabel>
    <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Neutral" Slot="thumb" />
</FluentSlider>
@code {
    int value1=0, value2=0;
}